<template>
  <a-modal :title="title" :visible="bannerVisible" :confirm-loading="confirmLoading" @cancel="cancel" @ok="ok">
    <a-form-model
      ref="editBannersModel"
      :model="bannerFormDatas"
      :rules="editBannerrules"
      layout="vertical"
      :labelCol="{ span: 8 }"
      :wrapperCol="{ span: 16 }"
    >
      <a-form-model-item label="标题" prop="title">
        <a-input v-model="bannerFormDatas.title" placeholder="请输入标题" />
      </a-form-model-item>
      <a-form-model-item label="位置" prop="position_id">
        <a-select v-model="bannerFormDatas.position_id" placeholder="位置">
          <a-select-option v-for="(item, index) in posisTypes" :key="index" :value="Number(item.id)">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="权重" prop="weight">
        <a-input v-model="bannerFormDatas.weight" placeholder="请输入权重" />
      </a-form-model-item>
      <a-form-model-item label="上传图片" prop="url">
        <upImages :url.sync="bannerFormDatas.url"></upImages>
      </a-form-model-item>
      <a-form-model-item label="链接地址" prop="url">
        <a-input v-model="bannerFormDatas.url" placeholder="请输入链接地址" />
      </a-form-model-item>
      <a-form-model-item label="状态">
        <a-radio-group v-model="bannerFormDatas.status">
          <a-radio :value="1"> 正常 </a-radio>
          <a-radio :value="0"> 禁用 </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { editBannerListApi, addBannerListApi } from '@/api/brand.js'
export default {
  props: ['posisTypes'],
  data() {
    return {
      bannerVisible: false,
      title: '添加',
      confirmLoading: false,
      loading: false,

      bannerFormDatas: {
        title: '',
        position_id: '',
        weight: '',
        url: '',
        status: 1
      },
      editBannerrules: {
        title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
        position_id: [{ required: true, message: '请选择位置', trigger: 'change' }],
        url: [{ required: true, message: '请输入链接地址', trigger: 'blur' }]
      }
    }
  },
  created() {},
  methods: {
    openEditBanner(json) {
      this.bannerFormDatas = {
        ids: '',
        title: '',
        content: '',
        end_time: '',
        is_first_push: 1,
        status: 1
      }
      this.title = '添加'
      if (json) {
        this.title = '修改信息'
        this.bannerFormDatas = JSON.parse(JSON.stringify(json))
        this.bannerFormDatas.ids = json.id
      }
      this.bannerVisible = true
    },
    handleOk() {
      this.bannerVisible = false
    },
    cancel() {
      this.handleOk()
    },
    ok() {
      this.$refs.editBannersModel.validate(valid => {
        if (valid) {
          if (this.bannerFormDatas.ids) {
            this.editLists()
          } else {
            this.addsLists()
          }
        }
      })
    },

    editLists() {
      editBannerListApi({...this.bannerFormDatas,
        brand_id: process.env.VUE_APP_BRAND_ID}).then(res => {
        this.$message.success("操作成功");
        this.handleOk()
        this.$emit('changes')
      })
    },
    addsLists() {
      addBannerListApi({...this.bannerFormDatas,
        brand_id: process.env.VUE_APP_BRAND_ID}).then(res => {
        this.$message.success("操作成功");
        this.handleOk()
        this.$emit('changes')
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
